<template>
    <div class="user">
      <div class="user-card">
        <template v-for="(item, index) in infusionList">
          <div class="user-item user-item__box" :key="item.id" v-if="item.isEmpty">
            <div class="user-item__bednum">{{ `0${index + 1}` }}</div>
            <div class="user-item__empty">
              <img src="../../../assets/bed-empty.png">
            </div>
            <div class="user-item__empty-text">空床患者未登录</div>
          </div>

          <div class="user-item" :key="item.id" v-else>
              <UserInfo :property="userInfo"  />

              <div class="user-item-tip" v-if="!(item.cmd_status === 1 || item.cmd_status === 7)">
                <div class="user-item-tag-anomaly user-item-tip__margin">{{ item.cmd_status | formatStatus }}</div>
                <div></div>
              </div>

              <div class="user-item-infusion" :class="(item.cmd_status === 1 || item.cmd_status === 7) ? 'user-item-infusion__height':''">
                  <div class="user-item-infusion-info">
                      <div>滴速</div>
                      <div>{{ item.speed }}</div>
                      <div class="hr"></div>
                      <div>用时</div>
                      <div>{{ item.use_time | formatTime }}</div>
                  </div>
                  <div class="user-item-infusion-bottle" v-if="item.speed === 0">
                      <img src="../../../assets/bottle-empty.png">
                  </div>
                  <div class="user-item-infusion-bottle" v-else>
                      <img src="../../../assets/bottle.png">
                  </div>
              </div>
          </div>
        </template>
      </div>
    </div>
</template>

<script>
import UserInfo from './UserInfo'

export default {
  props: {
    lists: Array,
    lists: {
      id: '1',
      userInfo: {},
      infusionStatus: '',
      speed: '',
      useTime: ''
    }
  },
  components: {
    UserInfo
  },
  filters: {
    formatStatus (code) {
        var cmdStatus = {
            '0' : '未知状态',
            '2' : '设备低电',
            '3' : '输液暂停',
            '4' : '设备关机',
            '5' : '设备故障',
            '6' : '滴速过慢',
            '8' : '滴速过快',
            '10' : '输液暂停时按下复位键',
            '11' : '输液中止',
            '12' : '输液中止',
            '13' : '输液暂停'
        }
        return cmdStatus[code]
    },
    formatTime (minutes) {
        var m = parseInt(minutes)
        if (typeof m !== 'number') {
            throw 'minutes mast be a number'
        }
        return `${ Math.floor(m / 60) } : ${ Math.floor(m % 60) }`
    }
  },
  created () {
    this.getInfuseData()
  },
  methods: {
    // 获取输液仪数据
    getInfuseData () {
        this.$http.post('/zyb/web/v3/getInfuseData').then(res => {
            this.infusionList = [ { id: '1', ...res.data } ]
            
        }).catch(err => {
            console.log(err);
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  flex-direction: row;
}
.user-card__height {
    height: 393px;
}
.user-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;

    .tem-error .tem-anomaly {
      color: #BF1414;
    }
    .heart-error .heart-anomaly {
        color: #BF1414;
    }
    .blood-error .oxygen-anomaly {
        color: #BF1414;
    }
    .systolic-error .systolic-anomaly {
        color: #BF1414;
    }
    .diastolic-error .diastolic-anomaly {
        color: #BF1414;
    }

    .user-item__box {
        position: relative;
        .user-item__bednum {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 40px;
            font-weight: 400;
            line-height: 56px;
            color: #8C8C8C;
        }
    }

    .user-item__empty {
        img {
            width: 176px;
            height: 122px;
            margin: 0 auto;
            margin-top: 110px;
            text-align: center;

        }
    }
    .user-item__empty-text {
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        color: #D1D1D1;
        text-align: center;
    }
    .user-item {
        width: 387px;
        height: 393px;
        background: #FFFFFF;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        padding: 16px;
        margin-top: 40px;
        margin-right: 28px;
        &-top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            .user-item-row {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
            }
            .user-item-headimg {
                width: 76px;
                height: 76px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .user-item-name {
                width: 120px;
                font-size: 28px;
                font-weight: 400;
                color: #000000;
                margin-right: 120px;
                text-align: left;
            }
            .user-item-bednumber {
                font-size: 40px;
                font-weight: 400;
                color: #000000;
            }
            .user-item-tag {
                width: 104px;
                height: 29px;
                border-radius: 4px;
                font-size: 22px;
                font-weight: 400;
                line-height: 29px;
            }
            .tag-teji {
                border: 1px solid #BF1414;
                color: #BF1414;
            }
            .tag-yiji {
                border: 1px solid #ED8484;
                color: #ED8484;
            }
            .tag-erji {
                border: 1px solid #FF8900;
                color: #FF8900;
            }
            .tag-sanji {
                border: 1px solid #51C424;
                color: #51C424;
            }
            .user-item-age {
                display: flex;
                align-items: center;
                font-size: 24px;
                font-weight: 400;
                color: #333333;
                &.male::before{
                    content: '男';
                    display: block;
                    height: 33px;
                    font-weight: 400;
                    color: #333333;
                    padding-left: 30px;
                    padding-right: 20px;
                    margin-right: 25px;
                    background: url('~@/assets/icon_male.png') no-repeat left center;
                    background-size: 26px 26px;
                    border-right: 1px solid #D1D1D1;
                }
                &.female::before{
                    content: '女';
                    display: block;
                    height: 33px;
                    padding-left: 30px;
                    padding-right: 20px;
                    margin-right: 25px;
                    font-weight: 400;
                    color: #333333;
                    background: url('~@/assets/icon_female.png') no-repeat left center;
                    background-size: 26px 26px;
                    border-right: 1px solid #D1D1D1;
                }
            }
        }
        &-tip {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            text-align: right;
        }

        &-tag-anomaly {
            flex: none;
            height: 27px;
            background: rgba(191, 20, 20, 0.29);
            border-radius: 4px;
            font-size: 18px;
            font-weight: 400;
            line-height: 27px;
            padding: 0 16px;
            color: #BF1414;
        }
        &-tip__margin {
            margin-top: 13px;
        }
        &-time {
            flex: 1;
            text-align: right;
            font-size: 24px;
            font-weight: 400;
            color: #3B608D;
            padding: 16px 0;
        }
        .user-item-ecg__box {
            width: 100%;
            height: 220px;
            border-radius: 10px;
            background: rgba(213, 231, 255, 0.61);
            position: relative;
            .ecg-v3 {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                color: #3B608D;
                text-align: left;
                position: absolute;
                top: 12px;
                left: 18px;
            }
            .ecg-info {
                width: 351px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                // font-size: 18px;
                // font-weight: 400;
                // line-height: 25px;
                // color: #3B608D;
                &__pressure {
                    display: flex;
                    flex-direction: row;
                }
            }
            .user-item-ecg {
                width: 351px;
                height: 128px;
                margin: 0 auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                .my-ecg {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
    }
}
.user-item-infusion__height {
    height: 255px!important;
    margin-top: 25px!important;
}
.user-item-infusion {
    width: 100%;
    height: 220px;
    background: rgba(213, 231, 255, 0.61);
    border-radius: 10px;
    margin-top: 23px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 42px;
    color: #3B608D;
    text-align: left;
    &-info {
        padding-left: 24px;
        .hr {
            width: 105px;
            border-bottom: 1px solid #3B608D;
            margin: 16px 0;
        }
    }
    &-bottle img {
        width: 116px;
        height: 204px;
        margin-right: 30px;
        display: block;
    }

}
</style>